<template>
  <div class="user-info-cell">
    <!-- 左侧头像 -->
    <img class="avatar" :src="avatar||'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0902/df3f4202509020851102730.jpeg'" alt="头像" />

    <!-- 右侧文字区域 -->
    <div class="info-text">
      <div class="title" v-if="title">{{ limitTitle(title,6) }}</div>
      <div class="subtitle" v-if="subtitle1">{{ displayLine2 }}</div>
      <div class="subtitle" v-if="subtitle2">{{ subtitle2 }}</div>
      <div class="subtitle" v-if="subtitle3">{{ subtitle3 }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserInfoCell",
  props: {
    avatar: { type: String, required: true },
    title: { type: String, required: true },      // 第一行
    subtitle1: { type: String, default: "" },     // 第二行
    subtitle2: { type: [String, Number], default: "" },     // 第三行
    subtitle3: { type: [String, Number], default: "" },     // 第四行
    maskConfig: { // 控制第二行是否脱敏
      type: Object,
      default: () => ({ start:3,end:4,enabled: false })
    }
  },
  computed: {
    displayLine2() {
      return this.maskValue(this.subtitle1, this.maskConfig)
    }
  },
  methods: {
    limitTitle(text, length) {
        if (!text) return "";
        return text.length > length ? text.substring(0, length) + "…" : text;
    },

    /**
     * 通用脱敏函数
     * @param {string} value - 原始字符串
     * @param {object} options - 配置项
     * @param {number} [options.start=0] - 保留开头字符数
     * @param {number} [options.end=0] - 保留结尾字符数
     * @param {string} [options.mask='*'] - 脱敏符号
     * @param {boolean} [options.enabled=true] - 是否启用脱敏
     * @returns {string}
     */
    maskValue(value, options = {}) {
      if (!value) return '';
      const {
        start = 0,
        end = 0,
        mask = '*',
        enabled = true
      } = options;

      if (!enabled) return value;

      const str = String(value);
      const len = str.length;

      if (start + end >= len) {
        return str; // 保留位数超过原字符串长度则不处理
      }

      const maskedPart = mask.repeat(len - start - end);
      return str.slice(0, start) + maskedPart + str.slice(len - end);
    }
  }
};
</script>

<style scoped>
.user-info-cell {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 8px;
}

.info-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 13px;
  color: #999;
}
</style>
